<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea name="txt_comment" id="txt_comment" cols="30" rows="5" maxlength="120"
         placeholder="请输入要评论的内容（120个字符）" v-model="content"></textarea>
        <mt-button type='primary' size="large" @click="addComment()">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, index) in comments" :key="item.id">
                <div class="cmt-title">
                    第{{index + 1}}楼&nbsp;&nbsp;用户:{{item.user}}&nbsp;&nbsp;发表时间:{{item.add_time}}
                </div>
                <div class="cmt-body">
                   {{item.content === 'undefind' ? '用户未评论' : item.content}}
                </div>
            </div> 
        </div>

        <mt-button type='danger' size="large" plain @click="moreComment()">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
    data(){
        return {
            pageIndex:1,
            comments:[],
            content:""
        }
    },
    created(){
        this. getComments()
    },
    methods:{
        getComments(){
            // this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex)
            // .then(result => {

            // });
            this.comments = this.commentData();
 
        },
        addComment(){
            var data = {
                id:1,
                user:"hello1",
                add_time:'2019-03-03 12:22:23',
                content: this.content
            }
            this.comments.push(data);
            this.content = "";

            Toast("添加成功")
        },
        moreComment(){
            this.comments.concat(this.commentData());
        },
        commentData(){
            var message = [
                {id:1,user:"hello1",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:2,user:"hello2",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:3,user:"hello3",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:4,user:"hello4",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:5,user:"hell5",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:6,user:"hello6",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:7,user:"hello7",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:8,user:"hello8",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:9,user:"hello9",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:10,user:"hello10",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:11,user:"hello11",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:12,user:"hello12",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:13,user:"hello13",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:14,user:"hello14",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:15,user:"hello15",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:16,user:"hello16",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:17,user:"hello17",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:18,user:"hello18",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:19,user:"hello19",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
                {id:20,user:"hello20",add_time:'2019-03-03 12:22:23',content:'ello.worlello.worlello.worlello.worl'},
            ];
            return message;
        }
    },
    props:['id']  //接父组件传入的值
}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        margin-bottom: 0;
        height: 85px;
    }

    .cmt-list{
        margin: 5px 0;
        .cmt-item{
             font-size: 13px;
            .cmt-title{
                line-height: 30px;
                background-color: gray;
            }
            .cmt-body{
                line-height: 30px;
                text-indent: 2em;
            }
        }
    }
}
</style>
